<template>
  <uni-popup ref="popup" type="bottom">
    <view class="sku-container">
      <!-- 顶部信息 -->
      <view class="sku-header">
        <image class="product-image" :src="productImage" mode="aspectFill"></image>
        <view class="product-info">
          <view class="product-price">¥{{ price }}</view>
          <view class="product-selected">已选{{ selectedText }}</view>
          <view class="product-stock">库存充足</view>
        </view>
        <view class="close-btn" @click="close">
          <text class="close-icon">×</text>
        </view>
      </view>
      
      <!-- 颜色选择 -->
      <view class="sku-section">
        <view class="section-title">颜色</view>
        <view class="options-container">
          <view 
            v-for="(item, index) in colors" 
            :key="index"
            :class="['option-item', selectedColor === item ? 'selected' : '']"
            @click="selectColor(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      
      <!-- 尺码选择 -->
      <view class="sku-section">
        <view class="section-title">尺码</view>
        <view class="options-container">
          <view 
            v-for="(item, index) in sizes" 
            :key="index"
            :class="['option-item', selectedSize === item ? 'selected' : '']"
            @click="selectSize(item)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      
      <!-- 数量选择 -->
      <view class="sku-section">
        <view class="section-title">购买数量</view>
        <view class="quantity-selector">
          <view class="quantity-btn" @click="decreaseQuantity">-</view>
          <view class="quantity-value">{{ quantity }}</view>
          <view class="quantity-btn" @click="increaseQuantity">+</view>
        </view>
      </view>
      
      <!-- 确定按钮 -->
      <view class="confirm-btn" @click="confirmSelection">确定</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义props
const props = defineProps({
  // 商品图片
  productImage: {
    type: String,
    default: '/static/images/product-default.jpg'
  },
  // 商品价格
  price: {
    type: [Number, String],
    default: 136
  },
  // 商品颜色选项
  colors: {
    type: Array,
    default: () => ['白色', '黑色', '绿色', '红色']
  },
  // 商品尺码选项
  sizes: {
    type: Array,
    default: () => ['XS', 'S', 'M', 'L']
  },
  // 购买类型：单独购买或拼团（作为初始值）
  buyType: {
    type: String,
    default: 'group' // 'single': 单独购买, 'group': 拼团
  }
});

// 定义emit
const emit = defineEmits(['confirm']);

// 响应式数据
const selectedColor = ref('');
const selectedSize = ref('');
const quantity = ref(1);
const currentBuyType = ref('');
const popup = ref(null);

// 计算属性
const selectedText = computed(() => {
  if (!selectedColor.value && !selectedSize.value) {
    return '';
  }
  return `${selectedColor.value || ''}, ${selectedSize.value || ''}`;
});

// 方法
// 打开弹窗
const open = (type) => {
  currentBuyType.value = type || props.buyType; // 使用传入的类型或默认值
  popup.value.open();
};

// 关闭弹窗
const close = () => {
  popup.value.close();
};

// 选择颜色
const selectColor = (color) => {
  selectedColor.value = color;
};

// 选择尺码
const selectSize = (size) => {
  selectedSize.value = size;
};

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

// 增加数量
const increaseQuantity = () => {
  quantity.value++;
};

// 确认选择
const confirmSelection = () => {
  if (!selectedColor.value || !selectedSize.value) {
    uni.showToast({
      title: '请选择完整的商品规格',
      icon: 'none'
    });
    return;
  }
  
  // 创建选择结果对象
  const selection = {
    color: selectedColor.value,
    size: selectedSize.value,
    quantity: quantity.value,
    buyType: currentBuyType.value
  };
  
  // 触发确认事件
  emit('confirm', selection);
  
  // 关闭弹窗
  close();
};

// 向父组件暴露方法
defineExpose({
  open,
  close
});
</script>

<style>
.sku-container {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}

.sku-header {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
}

.product-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-price {
  font-size: 36rpx;
  color: #FF5722;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.product-selected {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.product-stock {
  font-size: 24rpx;
  color: #999;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10rpx;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
}

.sku-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.options-container {
  display: flex;
  flex-wrap: wrap;
}

.option-item {
  min-width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 6rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  color: #333;
}

.option-item.selected {
  border-color: #FF5722;
  color: #FF5722;
  background-color: rgba(255, 87, 34, 0.05);
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  font-size: 28rpx;
}

.quantity-value {
  width: 80rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 26rpx;
}

.confirm-btn {
  height: 90rpx;
  line-height: 90rpx;
  background-color: #FF5722;
  color: #fff;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}
</style> 